<template>
    <div class="order">
        <div class="store-name" @click="gotoStore(order.storeId)">
            {{order.storeName}} 
            <span style="color:gray;">></span>
        </div>

        <div class="commodity-list">
            <div class="commodity-item" v-for="item in order.orderCommodityList" :key="item.id" @click="gotoStore(order.storeId)">
                <div class="left">
                    <img :src="item.img" class="commodity-img" />
                </div>

                <div class="right">
                    <div class="name-price-box">
                        <span class="name">{{item.name}}</span>

                        <span>
                            <span class="price">￥{{item.price}}</span>
                            <div style="color:gray;">x{{item.commodityNumber}}</div>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="total-price">
            实付款￥{{order.totalAmount}}
        </div>
        <div class="button">
            <van-button type="default" @click="gotoComment(order.id)" v-show="(type == 1)">评论</van-button>
            <van-button type="default" @click="gotoRefund(order.id)" v-show="(type == 2)">退款</van-button>
        </div>
    </div>
</template>

<script>
export default {
    props:['order', 'type'],
    methods:{
        gotoStore(id){
            this.$router.push({name:'storeDetail', params:{id}})
        },
        gotoCommodity(id){
            this.$router.push({name:'storeDetail', params:{id}})
        },
        gotoComment(id){
            alert("gotoComment")
        },
        gotoRefund(id){
            alert("gotoRefund")
        }
    }
}
</script>

<style scoped>

.order{
    width:90%;
    margin:auto;
    margin-bottom: 10px;
    background-color:white;

    padding:10px;
    margin-top:10px;

    border-radius: 8px;
}


.order .store-name{
    text-align: left;
    margin-bottom: 10px;
}

.order .total-price{
    text-align: right;
}
.store-name,
.name-price-box .name,
.price,
.total-price{
    font-size:14px;
    font-weight: 600;
}
.commodity-item{
    display: flex;

    margin-top:5px;
}

.commodity-item .left img{
    width:50px;
    height: 50px;
    border-radius: 8px;
}

.commodity-item .right{

    flex:1;
    margin-left:10px;
}

.right .name-price-box{
    display:flex;
    justify-content: space-between;;

    flex:1;

}

.button{
    text-align: right;
    margin-top:10px;
}
</style>